<template>
  <div style="background-color: #fcfcfc;padding: 30px; text-align: center">
    <div style="display: flex; align-items: center; justify-content: right; padding: 0 0 5px 0;">
      <el-button type="primary" @click="insertHandler">添加用户</el-button>
    </div>
    <TableMsg ref="tableMsg"
              :columns="columns"
              :request_value="request_value"
              @change-msg="getUserList"
              @delete="deleteUserHandler"
              @update="updateUserHandler"
              @info="infoUserHandler"
              @reset="resetUserHandler"
              @success="bindingRoleHandler"
              @selection-change="selectChangeHandler"
    />
    <modify-user-form ref="modifyUserForm"/>
    <InsertUserForm ref="insertUserForm"/>
    <user-detail ref="userDetail"/>
    <UserRoleForm ref="userRoleForm"/>
  </div>
</template>

<script>
import { ref } from 'vue'
import { userDelete, userList, userStatusEnable } from '@/api/user'
import TableMsg from '@/components/table/TableMsg'
import ModifyUserForm from '@/views/permission/user/form/ModifyUserForm'
import UserDetail from '@/views/permission/user/detail/UserDetail'
import InsertPermissionForm from '@/views/permission/permission/form/ModifyPermissionForm'
import InsertUserForm from '@/views/permission/user/form/InsertUserForm'
import UserRoleForm from '@/views/permission/user/form/UserRoleForm'

export default {
  name: 'UserPermissionViews',
  components: { UserRoleForm, InsertUserForm, UserDetail, ModifyUserForm, TableMsg },
  setup () {
    const columns = [
      { prop: 'username', label: '用户名' },
      { prop: 'nickname', label: '昵称' },
      { prop: 'email', label: '邮箱' },
      { prop: 'status', label: '状态', type: 'status', status: ['ENABLE', 'DELETED'], tag: [0, 2] },
      { prop: 'option', label: '操作', type: 'option', width: 420, option: { success: { text: '绑定角色' }, info: true, update: true, delete: true, reset: true } }
    ]
    const page = ref({
      total: 0,
      current: 1,
      size: 10
    })

    return {
      log: console.log,
      columns,
      data: ref([
        { username: 'df回馈客户v好看v好看好看好看进口好货vadf', nickname: 'dfadddfa', email: 'dfa', status: 'dfaf' }
      ]),
      selected: ref([]),
      request_value: ref({}),
      page
    }
  },
  methods: {
    infoUserHandler (val) {
      this.$refs.userDetail.userInfo = val
      this.$refs.userDetail.dialogVisible = true
      this.$refs.userDetail.getUserRoleByUserId(val.id)
    },
    deleteUserHandler (val) {
      userDelete(val).then(val => {
        // console.log(val)
        this.getUserList()
      })
    },
    resetUserHandler (val) {
      userStatusEnable(val).then(val => {
        // console.log(val)
        this.getUserList()
      })
    },
    updateUserHandler (val) {
      this.$refs.modifyUserForm.getUserInfo(val.id)
      this.$refs.modifyUserForm.dialogVisible = true
      this.$refs.modifyUserForm.userInfoOld = val
    },
    getUserList (val) {
      let page = this.$refs.tableMsg.getPage
      if (val) {
        page = val
      }
      userList(page).then((val) => {
        this.request_value = val
      })
    },
    selectChangeHandler (val) {
      this.selected = val
      console.log(val)
      this.$refs.userRoleForm.user = val
    },
    insertHandler (val) {
      this.$refs.insertUserForm.dialogVisible = true
      this.$refs.insertUserForm.userInfo = {}
    },
    bindingRoleHandler (val) {
      console.log(val)
      this.$refs.userRoleForm.user = val
      this.$refs.userRoleForm.dialogVisible = true
      this.$refs.userRoleForm.getUserRoleIds()
    }
  },
  mounted () {
    this.getUserList()
  }
}
</script>

<style scoped>
.pagination{
  padding-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
